<script>
  /**
   * This script corresponds to initializeOnboardingTaskCard() which will display the task card
   */

  function closeTaskCard() {
    var taskCard = document.getElementsByClassName("onboarding-task-card")[0];
    taskCard.style.display = "none";

    localStorage.setItem('task-card-closed', 'yes');
  }
</script>
<style>
.onboarding-task-card {
  display: none;
}
</style>

<div class="onboarding-task-card" role="dialog" aria-labelledby="task-card-title" aria-describedby="task-card-subtitle">
  <button class="close" onclick="closeTaskCard()" aria-label="<%= t("views.onboardings.close") %>">
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.99974 5.58623L11.9497 0.63623L13.3637 2.05023L8.41374 7.00023L13.3637 11.9502L11.9497 13.3642L6.99974 8.41423L2.04974 13.3642L0.635742 11.9502L5.58574 7.00023L0.635742 2.05023L2.04974 0.63623L6.99974 5.58623Z" fill="white" />
    </svg>
  </button>

  <div>
    <img alt="onboarding task card image" class="task-card-image" src="<%= Settings::General.logo_png %>" />
  </div>

  <h2 class="task-card-title" id="task-card-title"><%= t("views.onboardings.heading") %></h2>
  <p id="task-card-subtitle" class="task-card-subtitle"><%= t("views.onboardings.subtitle") %></p>
  <ul class="task-card-actions">
    <% if Article.admin_published_with("welcome").any? %>
      <li class="task-card-action">
        <a class="task-card-link" href="/welcome">
          <p><%= t("views.onboardings.welcome_html") %></p>
          <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
        </a>
      </li>
    <% end %>

    <%= application_policy_content_tag("li", record: Article, query: :create?, class: "task-card-action") do %>
      <a class="task-card-link" href="/new">
        <p><%= t("views.onboardings.write_html", community: community_name) %></p>
        <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
      </a>
    <% end %>

    <li class="task-card-action">
      <a class="task-card-link" href="/settings">
        <p><%= t("views.onboardings.settings_html") %></p>
        <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
      </a>
    </li>
    <% if FeatureFlag.enabled?("subscriber_icon") %>
      <li class="task-card-action">
        <a class="task-card-link" href="/++">
          <p><%= t("views.onboardings.join_subscription_html") %></p>
          <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
        </a>
      </li>
    <% end %>
    <% if FeatureFlag.enabled?("gemini_onboarding") && ApplicationConfig["GEMINI_OUTBOUND_URL"].present? %>
      <li class="task-card-action">
        <a class="task-card-link" href="<%= ApplicationConfig["GEMINI_OUTBOUND_URL"] %>" target="_blank" rel="noopener noreferrer">
          <p><span class="emoji">✨</span> Get Started with Google AI</p>
          <svg width="8" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.172 7L.222 2.05 1.636.636 8 7l-6.364 6.364L.222 11.95 5.172 7z" fill="#fff" /></svg>
        </a>
      </li>
    <% end %>
  </ul>
</div>
